<script>
import { reactive, toRefs, ref } from "vue";

import Table from "./components/Table.vue";
export default {
  components: { Table },
  setup() {
    const state = reactive({
      total: 100,
      pageSize: 10,
      formDataSys: {}, //pinia
      mapLabel: {
        MARKET_ID: "商场标识ID",
        MK_NAME: "商场名称",
        MK_ADD: "商场地址",
        MK_AREA: "占地面积",
        MK_REM: "商场备注",
        MK_LONG: "商场-经度",
        MK_LATI: "商场-维度",
      },
      tableLabel: [
        "MARKET_ID",
        "MK_NAME",
        "MK_ADD",
        "MK_AREA",
        "MK_REM",
        "MK_LONG",
        "MK_LATI",
      ],
      tableData: [
        {
          MARKET_ID: "122",
          MK_NAME: "王大广场",
          MK_ADD: "北农路2号",
          MK_AREA: "1200",
          MK_REM: "无",
          MK_LONG: "18.23",
          MK_LATI: "87.24",
        },
        {
          MARKET_ID: "122",
          MK_NAME: "王大广场",
          MK_ADD: "北农路2号",
          MK_AREA: "1200",
          MK_REM: "无",
          MK_LONG: "18.23",
          MK_LATI: "87.24",
        },
      ],
      formDataPost: [
        "MK_NAME",
        "MK_ADD",
        "MK_AREA",
        "MK_REM",
        "MK_LONG",
        "MK_LATI",
      ],
      formDataGet: ["MK_NAME", "MK_ADD", "MK_AREA", "MK_REM"],
      formDataPut: ["MK_NAME", "MK_REM"],
    });

    const tableRef = ref();

    const postTableData = (data) => {
      console.log("添加数据", data);

      //调用成功
      tableRef.value.dialogVisible = false;
      state.dialogVisible = false;
      ElMessage({
        message: "添加成功",
        type: "success",
      });

      //调用失败
      // ElMessage.error("添加失败.");
    };

    const deleteTableData = (data) => {
      console.log("删除接口", data);
    };

    const putTableData = (row, data) => {
      console.log("修改接口", row, data);

      //调用成功
      tableRef.value.dialogVisible = false;
      state.dialogVisible = false;
      ElMessage({
        message: "添加成功",
        type: "success",
      });

      //调用失败
      // ElMessage.error("添加失败.");
    };

    const getTableData = (currentPage, queryKey) => {
      console.log("更新数据", currentPage, queryKey);
    };

    const deleteAllTableData = (data) => {
      console.log(data);
    };

    return {
      ...toRefs(state),
      tableRef,
      postTableData,
      deleteTableData,
      putTableData,
      getTableData,
      deleteAllTableData,
    };
  },
};
</script>


<template>
  <div class="card-container">
    <el-card shadow="never">
      <template #header>商场基本信息设置</template>
      <el-form label-position="right" label-width="100px" :model="formDataSys">
        <el-form-item label="商场名称">
          <el-input v-model="formDataSys" />
        </el-form-item>
        <el-form-item label="商场地址">
          <el-input v-model="formDataSys" />
        </el-form-item>
        <el-form-item label="占地面积">
          <el-input v-model="formDataSys" />
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="formDataSys" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary">修改</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <el-card shadow="never" style="margin-top: 20px">
      <Table
        ref="tableRef"
        Upload
        Download
        deleteAll
        deleteButton
        :mapLabel="mapLabel"
        :tableData="tableData"
        :tableLabel="tableLabel"
        :formDataPost="formDataPost"
        :formDataPut="formDataPut"
        :formDataGet="formDataGet"
        :total="total"
        :pageSize="pageSize"
        @postTableData="postTableData"
        @deleteTableData="deleteTableData"
        @putTableData="putTableData"
        @getTableData="getTableData"
        @deleteAllTableData="deleteAllTableData"
      />
    </el-card>
  </div>
</template>

<style scoped>
.card-container {
  padding: 20px;
}
</style>